<div
  class="w-full max-w-sm rounded-lg border border-slate-200 bg-white px-3 py-6 shadow dark:border-slate-700 dark:bg-slate-800"
>
  <div class="flex items-center justify-between">
    <div class="flex">
      <div class="relative inline-flex">
        <span
          class="absolute bottom-0 right-0 h-3 w-3 rounded-full border bg-green-600 dark:border-slate-900 dark:bg-green-600 dark:text-slate-100"
        ></span>
        <img
          src="https://source.unsplash.com/40x40/?portrait"
          alt="user"
          class="h-10 w-10 rounded-full bg-slate-400 dark:border-slate-700"
        />
      </div>
      <div class="ml-4 flex flex-col gap-y-2">
        <h3 class="text-sm font-bold text-slate-900 dark:text-slate-200">
          John Doe
        </h3>
        <span class="text-xs text-slate-400">johndoe@gmail.com</span>
      </div>
    </div>
    <span
      class="rounded-full bg-green-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-green-600"
    >
      Free
    </span>
  </div>
  <button
    class="mt-6 w-full rounded-lg border border-slate-300 p-4 text-center text-sm font-medium text-slate-700 transition-colors duration-200 hover:bg-blue-600 hover:text-slate-50 focus:outline-none dark:border-slate-700 dark:text-slate-200"
    type="button"
  >
    ✨ Upgrade to Pro
  </button>
</div>
